<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Day 1 建议</title>
  <style>
    body {
      padding: 20px;
      max-width: 900px;
      margin: 0 auto;
    }

    xmp {
      background-color: #fafafa;
      margin-top: 0;
    }

    .tip {
      border: 1px solid #d3d3d388;
      border-radius: 10px;
      box-shadow: 0 0 10px 0px #d3d3d388;
      padding: 20px 50px;
    }

    .tip>strong {
      color: #fff;
      padding: 0 20px;
    }

    .tip-text {
      margin-bottom: 10px;
    }

    .tip-good {
      background-color: #00b300;
    }

    .tip-bad {
      background-color: #ff0000;
    }
  </style>
</head>

<body>
  <p>
    hi, 这里是一些建议
  </p>
  <hr>
  <div class="tip">
    <!-- 提示1 -->
    <div class="tip-text">1. 代码可以格式化, 通过缩进的方式, 使代码可读性更强; vscode的<strong>自动格式化</strong>快捷键好像是ctrl alt f</div>
    <strong class="tip-good">good</strong>
    <code>
      <xmp>
        <ul>
          <li>apple</li>
          <li>orange</li>
        </ul>
      </xmp>
    </code>
    <strong class="tip-bad">bad</strong>
    <code>
      <xmp>
        <ul>
        <li>apple</li>
        <li>orange</li>
        </ul>
      </xmp>
    </code>
    <!-- 提示2 -->
    <div class="tip-text">2. 此练习内容已包括大部分常用标签</div>
    <ul>
      <li>
        常用: div, span, p, h1, h2, h3, h4, h5, h6, ul, ol, li, a, strong, em, i, u, br, img, table, thead, tbody, tr, td, th
      </li>
      <li>
        不常用: b, hr, img, iframe, embed, object, param, dl, dt, dd, pre, small, kbd, samp, var, xmp
      </li>
      <li>
        还有其他一大堆标签, 更不常用, 遇到再查就行
      </li>
    </ul>
    <!-- 提示3 -->
    <div class="tip-text">3. 可以开始学习CSS了</div>
  </div>
</body>

</html>